<template>
  <div>
 <!-- 下拉刷新 -->
<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">

<!-- 上拉加载 -->
<!-- :immediate-check为false不会刚进入组件就加载load事件 -->
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多数据了"
  @load="onLoad"
  :immediate-check='false'
>
    <!-- 文章详情组件 -->
    <art-item v-for="item in artList" :key="item.art_id.toString() " :article='item' @remove-article='removeArticle'> </art-item>

</van-list>

</van-pull-refresh>
  </div>
</template>

<script>
import { getArtListAPI } from '@/API/homeAPI.js'
import ArtItem from '@/components//AriItem//ArtItem.vue'
export default {
  components: {
    ArtItem
  },
  props: {
    channelId: {
      type: Number, // 数据类型
      require: true // 必填项
    }
  },
  data: function () {
    return {
      artList: [], // 文章列表数组
      loading: false, // 加载状态 然后只要滑动就触发为true 当为true时就不会再次触发
      finished: false, // 数据加载完毕就设置为true
      isRefresh: false
    }
  },
  methods: {
    // 请求文章列表数据
    async initArtList (state) {
      const { data: res } = await getArtListAPI(this.channelId)
      // console.log(res)
      if (res.message === 'OK') {
        // this.artList = res.data.results
        // console.log(this.artList)
        // 如果发送请求成功,那么把老数据和新数据拼接在一起

        if (state) { // 如果有参数 那么就是下拉刷新 则 新数据在老数据前面
          this.artList = [...res.data.results, ...this.artList]
          // 同时isRefresh为在更改为false
          this.isRefresh = false
        } else { // 没有参数传入 为flase 那么就是上拉加载触发此事件
          this.artList = [...this.artList, ...res.data.results]
          // 在把loading的状态改为false
          this.loading = false
          // 判断数据是否加载完毕
          if (res.data.results.length === 0) {
            this.finished = true
          }
        }
      }
    },
    // 上拉加载
    onLoad () {
      // console.log(`loading值为${this.loading}`)
      // 调用initArtList发送请求
      this.initArtList()
    },
    // 下拉刷新
    onRefresh () {
      // console.log(`下拉刷新在下拉松开后触发,把isRefresh的值改变成${this.isRefresh}`)
      this.initArtList(true) // 调用请求数据方法 并传入一个boolean值做判断
    },
    removeArticle (id) { // 过滤文章操作
      this.artList = this.artList.filter(item => item.art_id.toString() !== id)
      if (this.artList.length < 10) {
        this.initArtList()
      }
    }

  },
  created () {
    this.initArtList()
  }
}
</script>

<style lang="less" scoped>
</style>
